<template>
    <div v-show="visibles" class="detect-s-list">
        <div class="detect-s-list-box">
            <div class="flex-center headline">
                <div class="flex-left">{{ title }}</div>
                <div class="flex-right flex-center" @click="closeDialog" style="cursor: pointer;"> <span
                        class="flex-img cursor" style="color:#2CA6E0;"><img src="@/assets/img/left.png"
                            style="width: 16px;height: 20px;" />返回</span></div>
            </div>
            <div class="de-el-table">
                <el-table :data="gridData" class="table-list">
                    <el-table-column property="date" label="Date" width="150" />
                    <el-table-column property="name" label="Name" width="200" />
                    <el-table-column property="address" label="Address" />
                </el-table>
            </div>
            <div class="flex" style="margin-top:20px;">
                <div class="flex-left" style="margin-left: 20px; color: #9A9DAA;">共有{{ total }}项数据</div>
                <el-pagination class="flex-right" layout="prev, pager, next, jumper" style="margin-right: 50px;"
                    :total="total" small />
            </div>
        </div>

    </div>
</template>
<script>

export default {
    props: {
        visible: Boolean,
        gridData: Array,
        title:String,
    },
    name: "ResultList",
    data() {
        return {
            dialogTableVisible: false,
            visibles: false,
            total: 1000
        }
    },
    watch: {
        visible(newValue) {
            // 监听 visible 属性的变化
            this.visibles = newValue;
        },
    },
    mounted() {

    },
    unmounted() {
    },
    methods: {
        closeDialog() {//关闭回调
            this.visibles = false;
            this.$emit("updateVisible", false);
        }

    },
};
</script>
<style  lang="scss">
.detect-s-list {
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);

    /* 黑色背景透明度为0.5 */
    .detect-s-list-box {
        background: linear-gradient(to left, #1D2435, #2C334C);
        margin-top: 60px;
        height: calc(100vh - 60px);

        .headline {
            background: linear-gradient(to left, #313B53, #272F43);
            color: #9A9DAA;
            line-height: 30px;
            font-weight: 700;
            font-size: 14px;
            padding: 10px 10px;
        }

        .de-el-table {
            background: none;
            padding: 0 20px;

            .el-table {
                --el-table-border-color: none !important;
                --el-table-border: none;
                --el-table-bg-color: none !important;
                --el-table-header-text-color: hsl(223, 31%, 13%);
                --el-table-row-hover-bg-color: #171D2C;
            }

            .el-table tr {
                background-color: initial;
                color: #9A9DAA;
            }

            /* 偶数行 */
            .el-table .el-table__row:nth-child(odd) {
                background-color: #575D73;
                color: #9A9DAA;
            }

            .el-table .el-table__row {
                height: 50px;
            }

            .el-table th.el-table__cell {
                background: none;
                background-color: initial;
            }

            .el-table__row {
                border: none;
            }

            .table-list {
                height: calc(100vh - 180px);
            }

        }
    }
}
</style>
  